<template>
  <div class="container" v-loading="loading">
    <div class="content">
      <p class="title">处置信息</p>
      <PushDetailLeft :has-deal="false" :sts-list="stsList" :id="type === 'url' ? urlPostId :id"></PushDetailLeft>
    </div>
    <div class="content content-right">
      <p class="title">推送记录</p>
      <el-empty :image-size="100" v-if="pushList.length === 0" description="暂无推送记录"></el-empty>
      <el-timeline class="push-list">
        <el-timeline-item v-for="(item, index) in pushList" :key="index">
          <div class="item">
            <div class="left">
              <p class="text">{{ item[3] }}</p>
              <p class="text" :class="{ color: item[0] > 0 }" @click="handleCustomerClick(item, index, 'click')">目标客户：{{ item[0] }}个（与我有关{{ item[1] }}个）</p>
            </div>
            <p class="right" v-if="item[2]">推送时间：{{ item[2] }}</p>
          </div>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>
<script>
import { apiPushRightList } from '@/api/assetsDisposal'
import PushDetailLeft from './PushDetailLeft'

export default {
  props: {
    type: String,
    id: String,
    stsList: Array,
    urlPostId: String,
    urlVipLevel: String
  },
  components: { PushDetailLeft },
  data() {
    return {
      loading: false,
      pushList: [],
    }
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    // 获取详情
    getDetail() {
      let info = {}
      if(this.type === 'url') {
        info = {
          id: this.urlPostId,
        }
      }else {
        info = {
          id: this.id,
        }
      }
      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      apiPushRightList(formData).then((res) => {
        if (res.code !== 200) {
          return
        }
        this.pushList = res.data
        if(this.type === 'url') {
          this.handleCustomerClick(this.pushList[this.urlVipLevel], this.urlVipLevel, 'url')
        }
      })
    },
    // 点击目标客户
    handleCustomerClick(item, index, type) {
      if (item[0] > 0) {
        this.$emit('showCustomerInfo', { level: index, name: item[3], type })
      }
    },
  },
}
</script>
<style scoped lang="scss">
.container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: 100%;
  .content {
    width: 50%;
    padding: 0 24px;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    padding-bottom: 20px;
    &.no-scroll {
      padding: 0;
      overflow: hidden;
      > .title {
      padding: 0 24px;
      }
    }
    > .title {
      margin: 0 0 10px;
      font-weight: bold;
      font-size: 14px;
    }
  }
}

.push-list {
  font-size: 12px;
  .item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    .color {
      color: #409eff;
      cursor: pointer;
    }
    p {
      margin-top: 5px;
    }
  }
}
</style>
